<template>
	<view class="search-wrap">
		<!-- 搜索框 -->
		<view class="" id="searchBox" style="padding: 15rpx">
			<u-search style="width: 100%" bgColor="#ffffff" border-color="#77c7a2" height="40" v-model="form.keyWord" @custom="search"
				@search="search" :show-action="false" action-text="搜索" :animation="true" shape="round"
				search-icon="search"></u-search>
		</view>

		<view class="p10">
			<view class="d-flex a-center j-sb mb5">
				<view class="left"><text class="min-name">历史搜索</text></view>
				<view class="right">
					<!-- <span class="icon iconfont icon-lajitong" @click='clearStorage'></span> -->
					<u-icon name="trash-fill" color="#333333" size="22" @click='clearStorage'></u-icon>
				</view>
			</view>
			<view class="before-search">
				<view v-for="(item,index) in arr" :key="index" class="mr10 mb10">
					<u-tag @click="search(arr[index])" :text="arr[index]" type="success" mode="dark" shape="circle"
						bg-color="#E8E8E8" color="#505050" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {

				},
				arr: [],
			}
		},
		mounted() {
			/*获取缓存数据*/
			this.getData();
		},
		methods: {
			/*获取缓存里的搜索历史*/
			getData() {
				let self = this;
				/*获取搜索记录*/
				uni.getStorage({
					key: 'search_list',
					success: function(res) {
						if (res != null && res.data != null) {
							self.arr = res.data;
						}
					}
				});

			},
			/*搜索*/
			search(str) {
				let self = this;
				let search = null;
				if (str != null) {
					search = str;
				} else {
					search = this.form.keyWord;
				}

				let arrs = this.arr;
				if (typeof search != "undefined" && search != null && search != '') {
					if (arrs.indexOf(search) < 0) {
						arrs.push(search);
					}
				} else {
					uni.showToast({
						title: '请输入搜索的关键字',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				

				let category_id = 0;
				let sortType = 'all';

				uni.navigateTo({
					url: "/subpkg/goods_list/goods_list?search_value="+ str
				});
				
				/*设置搜索记录*/
				uni.setStorage({
					key: 'search_list',
					data: arrs,
					success: function() {
						// console.log('success');
					}
				});
			},

			/*清楚缓存*/
			clearStorage() {
				let self = this;
				uni.removeStorage({
					key: 'search_list',
					success: function(res) {
						self.arr = [];
					}
				});
			}
		}
	}
</script>

<style scoped>
	.search-wrap {
		box-sizing: border-box;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.search-wrap .index-search-box .search-box {
		padding: 0 20rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
		overflow: hidden;
		font-size: 28rpx;
		color: #999;
		box-sizing: border-box;
	}

	.search-wrap .index-search-box button {
		height: 78rpx;
		line-height: 78rpx;
		border: solid 1rpx #CCCCCC;
		color: #333333;
		background: #FFFFFF;
	}

	.before-search {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: wrap;
	}

	.before-search .item {
		padding: 16rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 8rpx;
		color: #686868;
		background: #f0f2f5;
		font-size: 24rpx;
	}
</style>